<html ng-app="faasGateway">

<head>
    <title>OpenFaaS Portal</title>
    <link href="https://fonts.googleapis.com/css?family=Rationale|Roboto+Mono|Roboto:300,400,400i,500,700" rel="stylesheet">
    <link rel="stylesheet" href="style/angular_material/1.1.0/angular-material.min.css">
    <link rel="stylesheet" href="style/bootstrap.css">
    <link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
    <link rel="manifest" href="manifest.json">
    <link rel="mask-icon" href="safari-pinned-tab.svg" color="#5bbad5">
    <meta name="theme-color" content="#ffffff">
    
    <noscript>
        <style>
            .jsonly {
                display: none;
            }
        </style>
    </noscript>
</head>

<body ng-controller="home">
    <div class="jsonly">
    <div layout="column" ng-cloak>

        <md-toolbar class="md-theme-indigo" hide-gt-sm>
            <div class="md-toolbar-tools no-pad">
                <md-button ng-click="toggleSideNav()" class="md-icon-button" aria-label="Menu">
                    <md-icon md-svg-icon="img/icons/ic_menu_white.svg"></md-icon>
                </md-button>
            </div>
        </md-toolbar>
        <section id="popupContainer" layout="row" flex>
            <md-sidenav class="md-sidenav-left" md-component-id="left" md-is-locked-open="$mdMedia('gt-sm')" md-whiteframe="4" layout="column">

                <md-toolbar class="md-theme-indigo">
                    <div class="md-toolbar-tools no-pad">
                        <a href="https://www.openfaas.com/" target="_blank"><img src="icon.png" alt="OpenFaaS Icon" class="md-avatar" /></a>
                        <h1 style="flex: 1 1 auto;"><img src="img/logo-text.svg" class="md-logo"></h1>
                        <md-button ng-click="toggleSideNav()" class="md-icon-button" aria-label="Back" hide-gt-sm>
                            <md-icon md-svg-icon="img/icons/ic_arrow_back_white.svg"></md-icon>
                        </md-button>
                    </div>
                </md-toolbar>

                <md-content layout-padding>

                    <md-list>
                        <md-list-item class="primary-item" ng-disabled="isFunctionBeingCreated" ng-click="newFunction()">
                            <md-icon style="margin-right: 16px" md-svg-icon="img/icons/ic_shop_two_black_24px.svg"></md-icon>
                            <p>Deploy New Function</p>
                        </md-list-item>
                    </md-list>

                    <md-input-container ng-show="allNamespaces.length > 1" class="display-flex">
                        <label>Namespace</label>
                        <md-select  ng-model="namespaceSelectDropdown" placeholder="Select a Namespace">
                            <md-option ng-click="setNamespace(namespace)" ng-value="namespace" ng-repeat="namespace in allNamespaces" ng-selected="namespace === selectedNamespace">
                                {{ namespace }}
                            </md-option>
                        </md-select>
                    </md-input-container>

                    <md-input-container ng-hide="functions.length === 0" class="md-block" flex-gt-sm>
                        <label style="padding-left: 8px">Search for Function</label>
                        <input ng-model="search.name">
                      </md-input-container>
                    <md-list>
                        <md-list-item ng-switch class="md-3-line" ng-click="showFunction(function)" ng-repeat="function in functions | filter:search | orderBy: '-invocationCount'" ng-class="function.name == selectedFunction.name ? 'selected' : false">
                            <md-icon ng-switch-when="true" style="color: blue" md-svg-icon="person"></md-icon>
                            <md-icon ng-switch-when="false" md-svg-icon="person-outline"></md-icon>
                            <p>{{function.name}}</p>
                            <md-divider ng-if="!$last"></md-divider>
                        </md-list-item>
                    </md-list>
                </md-content>
            </md-sidenav>
            
            <md-content flex layout="column" layout-align="start center" class="blankslate" ng-if="!selectedFunction">
              <p ng-if="functions.length === 0">
                You have no functions in OpenFaaS.<br>
                Start by deploying a new function.
              </p>
              <p ng-if="functions.length !== 0">
                Select a function or deploy a new one.
              </p>
              <md-button class="md-primary md-raised" ng-click="newFunction()">
                Deploy new function
              </md-button>
              <p>Or use <strong>faas-cli</strong> to build and deploy functions:</p>
              <pre>$ curl -sSL https://cli.openfaas.com | sudo sh</pre>
            </md-content>

            <md-content flex layout="column" ng-repeat="function in functions" ng-if="function.name == selectedFunction.name">

                <md-card md-theme="default" md-theme-watch>
                    <md-card-title>
                        <md-card-title-text>

                            <div layout="row" layout-align="space-between">
                                <span class="md-headline">
                                    {{function.name}}
                                </span>

                                <md-button ng-click="deleteFunction()" class="md-icon-button" aria-label="Delete">
                                    <md-tooltip md-direction="left">Delete</md-tooltip>
                                    <md-icon md-svg-icon="img/icons/ic_delete_black.svg"></md-icon>
                                </md-button>

                            </div>

                            <div layout-gt-sm="row">
                                <md-input-container class="md-icon-float md-block">
                                   <label>Status</label>
                                   <input value="{{ function.ready ? 'Ready' : 'Not ready' }}" type="text" readonly="readonly">
                                </md-input-container>

                                <md-input-container class="md-icon-float md-block">
                                    <label>Replicas</label>
                                    <input ng-model="function.replicas" type="text" readonly="readonly">
                                </md-input-container>

                                <md-input-container class="md-block" flex-gt-sm>
                                    <label>Invocation count</label>
                                    <input ng-model="function.invocationCount" type="text" readonly="readonly">
                                </md-input-container>

                                <md-input-container class="md-block" flex-gt-sm ng-show="allNamespaces.length > 1">
                                    <label>Namespace</label>
                                    <input ng-model="function.namespace" type="text" readonly="readonly">
                                </md-input-container>
                            </div>

                            <div layout-gt-sm="row">
                                <md-input-container class="md-block" flex-gt-sm>
                                    <label>Image</label>
                                    <input ng-model="function.image" type="text" readonly="readonly">
                                </md-input-container>
                                <md-input-container class="md-block function-url" flex-gt-sm>
                                    <label>URL</label>
                                    <input ng-value="(function.namespace && function.namespace.length > 0 && allNamespaces && allNamespaces.length > 1)? baseUrl + 'function/' + function.name + '.' + function.namespace : baseUrl + 'function/' + function.name" type="text" readonly="readonly">
                                    <md-icon ng-if="canCopyToClipboard" md-svg-src="img/icons/outline-file_copy-24px.svg" ng-click="copyClicked($event)"></md-icon>
                                </md-input-container>
                            </div>
                            <div layout-gt-sm="row" ng-show="function.envProcess">
                                <md-input-container class="md-block" flex-gt-sm>
                                    <label>Function process</label>
                                    <input ng-model="function.envProcess" type="text" readonly="readonly">
                                </md-input-container>
                            </div>
                        </md-card-title-text>
                    </md-card-title>
                </md-card>
                <md-card>
                    <md-card-title>
                        <md-card-title-text>

                            <span class="md-headline">
                                Invoke function
                            </span>
                            <div layout-gt-sm="row">
                                <md-input-container class="md-block" flex-gt-sm>
                                    <button ng-click="fireRequest()" class="md-raised md-button md-ink-ripple" type="button" ng-disabled="invocationInProgress || (selectedFunction && !selectedFunction.ready)">
                                        <span class="ng-scope">Invoke</span><div class="md-ripple-container"></div>
                                    </button>
                                </md-input-container>
                                <md-progress-circular md-mode="indeterminate" ng-show="invocationInProgress"></md-progress-circular>
                            </div>

                            <div layout-gt-sm="row">
                                <md-input-container class="md-block" flex-gt-sm>
                                    <md-radio-group ng-model="invocation.contentType" layout="row" layout-align="start center">
                                        <md-radio-button value="text" class="md-primary"> Text </md-radio-button>
                                        <md-radio-button value="json" class="md-primary"> JSON </md-radio-button>
                                        <md-radio-button value="binary" class="md-primary"> Download </md-radio-button>                                        
                                    </md-radio-group>
                                </md-input-container>
                            </div>

                            <div layout-gt-sm="row">
                                <md-input-container class="md-block" flex-gt-sm>
                                    <label>Request body</label>
                                    <textarea ng-model="invocation.request" class="monospace" cols="80" rows="4"></textarea>
                                </md-input-container>
                            </div>

                            <div layout-gt-sm="row">
                                <md-input-container class="md-block" flex-gt-sm>
                                    <label>Response status</label>
                                    <input ng-model="invocationStatus" type="text" readonly="readonly">
                                </md-input-container>
                                <md-input-container class="md-block" flex-gt-sm>
                                    <label>Round-trip (s)</label>
                                    <input ng-model="roundTripDuration" type="text" readonly="readonly">
                                </md-input-container>
                            </div>
                            <div layout-gt-sm="row">
                                <md-input-container class="md-block" flex-gt-sm>
                                    <label>Response body</label>
                                    <textarea ng-model="invocationResponse" class="monospace" cols="80" rows=10></textarea>
                                </md-input-container>
                            </div>
                        </md-card-title-text>
                    </md-card-title>
                </md-card>
            </md-content>
        </section>
    </div>


    <script src="script/angularjs/1.6.9/angular.min.js"></script>
    <script src="script/angularjs/1.6.9/angular-animate.min.js"></script>
    <script src="script/angularjs/1.6.9/angular-aria.min.js"></script>
    <script src="script/angularjs/1.6.9/angular-messages.min.js"></script>
    <script src="script/angular_material/1.1.4/angular-material.min.js"></script>
    <script src="script/funcstore.js"></script>
    <script src="script/bootstrap.js"></script>
    </div>
    
    <noscript>
	<div style="padding: 15px;">
	        <h2>You need JavaScript to view this page</h2>
        	<p>You don't need the web dashboard to use OpenFaaS, you can get the CLI with this command: <code>curl -sL cli.openfaas.com | sh</code></p>
	</div>
    </noscript>
</body>

</html>
